<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';

import { Page } from '@vben/common-ui';

import { ElMessage } from 'element-plus';

import {
  getReptile,
  putReptile,
  refreshReptile,
} from '#/api/reduce-position-trigger';

import { column, columnLeverage } from './indexcolumn';

const tableRef = ref();
const selectedRows = ref([]);
const loading = ref(false);
const activeName = ref(1);

const pager = ref({
  symbol: '',
  page: 1,
  limit: 20,
});
const dialogVisible = ref(false);
const form = ref({
  status: false,
  sort: 0,
});
const connectLoading = ref(false);
const total = ref(0);
const tableData = ref<any[]>([]);
// const handleBatchModify = () => {
//   if (selectedRows.value.length === 0)
//     return ElMessage.warning('请选择要修改的行');

//   dialogVisible.value = true;
// };

const handleSelectionChange = (rows: any) => {
  selectedRows.value = rows;
};

const getReptileList = async () => {
  const res: any = await getReptile({
    ...pager.value,
    type: activeName.value,
  });
  tableData.value = res.list;
  total.value = res.total;
};
const handleTabClick = () => {
  pager.value.symbol = '';
  getReptileList();
};
const handleSubmit = () => {
  connectLoading.value = true;
  putReptile({
    symbols: selectedRows.value.map((item: any) => ({
      symbol: item.symbol,
      status: form.value.status,
      sort: form.value.sort,
    })),
  })
    .then(() => {
      ElMessage.success('操作成功');
      dialogVisible.value = false;
      getReptileList();
    })
    .finally(() => {
      connectLoading.value = false;
    });
};
const handleRefresh = () => {
  loading.value = true;
  refreshReptile({})
    .then(() => {
      ElMessage.success('刷新成功');
      getReptileList();
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleStatusChange = async (row: any) => {
  const data = {
    symbols: [{ symbol: row.symbol, status: row.status, sort: row.sort }],
  };
  await putReptile(data);
  ElMessage.success('操作成功');

  getReptileList();
};

const handleSortBlur = (row: any) => {
  handleStatusChange(row);
};

watch(
  () => pager.value,
  () => {
    getReptileList();
  },
  {
    deep: true,
  },
);

onMounted(() => {
  getReptileList();
});
</script>

<template>
  <Page title="" description="">
    <div class="reduce-position-trigger">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="只减仓" :name="1" />
        <el-tab-pane label="10倍杠杆" :name="2" />
        <el-tab-pane label="20倍杠杆" :name="3" />
      </el-tabs>
      <div class="mb-4 flex justify-between">
        <el-input
          v-model="pager.symbol"
          placeholder="请输入币种"
          style="width: 300px"
        />
        <div>
          <el-button @click="handleRefresh"> 刷新 </el-button>
        </div>
      </div>
      <ReTable
        ref="tableRef"
        :key="activeName"
        :columns="activeName === 1 ? column : columnLeverage"
        :data="tableData"
        :pager="pager"
        :total="total"
        :loading="loading"
        @selection-change="handleSelectionChange"
      >
        <template #sort="scope">
          <el-input
            v-model.number="scope.row.sort"
            style="width: 150px"
            @blur="handleSortBlur(scope.row)"
          />
        </template>
        <template #status="scope">
          <el-switch
            v-model="scope.row.status"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </ReTable>
    </div>
    <el-dialog v-model="dialogVisible" title="批量修改" width="680px">
      <el-form :model="form" label-width="120px" class="mt-4">
        <el-form-item label="置后">
          <el-switch v-model="form.status" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model.number="form.sort" style="width: 250px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" :disabled="connectLoading">
            取消
          </el-button>
          <el-button
            type="primary"
            :loading="connectLoading"
            @click="handleSubmit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </Page>
</template>

<style lang="scss" scoped>
.reduce-position-trigger {
  padding: 16px;
  background-color: hsl(var(--background));
}
</style>
